@extends('layouts.home.layout')
@section('css')
    <link rel="stylesheet" href="/home/css/topnav.css">
@endsection
@section('content')

    @include('layouts.home._nav')


    <div class="calc-entry" style="margin-top: 20px;">
        <ul class="am-cf">
            <li class="ce-li cel1 "><a href="/main/mortgage">购房贷款工具</a></li>
            <li class="ce-li cel2"><a href="/main/card">信用卡分期</a></li>
            {{--<li class="ce-li cel3 cur"><a href="/main/evaluate">贷款能力评估</a></li>--}}
            <li class="ce-li cel4"><a href="/apply/cardstepone">信用卡快捷推荐</a></li>
        </ul>
    </div>

    <div class="financial">
        <div class="financial_top">
            <div class="financial_title">
                <img src="/home/images/ztopai_03.jpg" />
                <div>
                    <h1>贷款能力评估</h1>
                    <p>快速评估贷款金额</p>
                </div>
            </div><!--financial_title-->
        </div><!--financial_top-->

        <div class="loanbox firststep">
            <div class="pgtitle"><img src="/home/images/pgtitle1_07.jpg" width="891" height="39"/></div>
            <div class="assessment">
                <div class="assessment_left">
                    <p>预估贷款额度<span class="guzhi">0</span></p>
                </div>
                <div class="assessment_right">
                    <p>每月打入银行卡工资</p>
                    <input name="gongzi" placeholder="单位：元" class="gongzi">
                    <button class="assessment_right_button first_next">下一步</button>
                </div>
            </div><!--assessment-->
        </div><!--loanbox-->

        <div class="loanbox secondstep" style="display:none;">
            <div class="pgtitle"><img src="/home/images/pgtitle2_07.jpg" width="891" height="39"/></div>
            <div class="assessment">
                <div class="assessment_left">
                    <p>预估贷款额度<span class="guzhi secondgz">3-10万</span></p>
                </div>
                <div class="assessment_right">
                    <p>职业身份</p>
                    <select  class="job">
                        <option value="">请选择</option>
                        <option value="上班族">上班族</option>
                        <option value="企业主">企业主</option>
                        <option value="个体工商户">个体工商户</option>
                        <option value="自由职业">自由职业</option>
                    </select>
                    <div class="sxbtnbox">
                        <button class="sbtn second_next">下一步</button>
                        <button class="xbtn second_prev">上一步</button>
                    </div>
                </div>
            </div><!--assessment-->
        </div><!--loanbox-->

        <div class="loanbox threestep" style="display:none;">
            <div class="pgtitle"><img src="/home/images/pgtitle3_07.jpg" width="891" height="39"/></div>
            <div class="assessment">
                <div class="assessment_left">
                    <p>预估贷款额度<span class="guzhi threegz">3-10万</span></p>
                </div>
                <div class="assessment_right">
                    <p>房产类型</p>
                    <select  class="house">
                        <option value="">请选择</option>
                        <option value="无房产">无房产</option>
                        <option value="商品房">商品房</option>
                        <option value="自建房">自建房</option>
                        <option value="公寓">公寓</option>
                        <option value="经济适用房">经济适用房</option>
                        <option value="划拨房">划拨房</option>
                        <option value="还建房">还建房</option>
                        <option value="别墅">别墅</option>
                        <option value="写字楼">写字楼</option>
                        <option value="商铺">商铺</option>
                    </select>
                    <div class="sxbtnbox">
                        <button class="sbtn three_next">下一步</button>
                        <button class="xbtn three_prev">上一步</button>
                    </div>
                </div>
            </div><!--assessment-->
        </div><!--loanbox-->

        <div class="loanbox fourstep" style="display:none;">
            <div class="pgtitle"><img src="/home/images/pgtitle4_07.jpg" width="891" height="39"/></div>
            <div class="assessment">
                <div class="assessment_left">
                    <p>预估贷款额度<span class="guzhi fourgz">3-10万</span></p>
                </div>
                <div class="assessment_right">
                    <p>是否有车</p>
                    <select class="car">
                        <option value="">请选择</option>
                        <option value="无车">无车</option>
                        <option value="1年">1年</option>
                        <option value="2年">2年</option>
                        <option value="3年">3年</option>
                    </select>
                    <div class="sxbtnbox">
                        <button class="sbtn four_next">下一步</button>
                        <button class="xbtn four_prev">上一步</button>
                    </div>
                </div>
            </div><!--assessment-->
        </div><!--loanbox-->

        <div class="loanbox fivestep" style="display:none;">
            <div class="pgtitle"><img src="/home/images/pgtitle5_07.jpg" width="891" height="39"/></div>
            <div class="assessment">
                <dl class="Personal" style="width:500px;margin:auto;overflow:hidden;">
                    <dt><img src="/home/images/chenggong_03.jpg"></dt>
                    <dd><h1>恭喜完成！</h1><p>请输入您的联系方式，我们将评估结果发送至您的手机。</p></dd>
                </dl>
                <form action="/main/evaluate" name="FastForm" id="FastForm" method="post">
                    {!! csrf_field() !!}
                    <input type="hidden" value="" name="evaluate" class="evaluate">
                    <input type="hidden" value="" name="job" class="job_input">
                    <input type="hidden" value="" name="house" class="house_input">
                    <input type="hidden" value="" name="car" class="car_input">
                    <input class="input_box" name="mobile" placeholder="请输入11位手机号"/>
                    <div class="complete">
                        <input type="text" name="imgcode"/>
                        <img src="{{Captcha::src()}}" class="captcha-image"/>
                    </div>

                    <div class="sxbtnbox" style="margin:auto;margin-top:20px;">
                        <button type="button" class="sbtn subBtn">提交</button>
                        <button type="button" class="xbtn">重新评估</button>
                    </div>
                </form>
            </div><!--assessment-->
        </div><!--loanbox-->


    </div><!--financial-->

    <script>
        $(document).ready(function(){
            $('.first_next').click(function(){
                var gongz=$('.gongzi').val();
                if(gongz==''){
                    alert('请先填写工资');
                    return false;
                }
                var cmoney=parseInt(parseInt(gongz)*30/10000);
                $('.guzhi').html(cmoney+'万');
                $('.evaluate').val(cmoney);
                $('.firststep').css('display','none');
                $('.secondstep').css('display','block');
            });
            $('.second_next').click(function(){
                var job=$('.job').val();
                if(job==''){
                    alert('请选择职业身份');
                    return false;
                }
                $('.job_input').val(job);
                $('.secondstep').css('display','none');
                $('.threestep').css('display','block');
            });
            $('.second_prev').click(function(){
                $('.firststep').css('display','block');
                $('.secondstep').css('display','none');

            });
            $('.three_next').click(function(){
                var house=$('.house').val();
                if(house==''){
                    alert('请选择房产类型');
                    return false;
                }
                $('.house_input').val(house);
                $('.threestep').css('display','none');
                $('.fourstep').css('display','block');
            });
            $('.three_prev').click(function(){
                $('.threestep').css('display','none');
                $('.secondstep').css('display','block');
            });
            $('.four_next').click(function(){
                var car=$('.car').val();
                if(car==''){
                    alert('请选择是否有车');
                    return false;
                }
                $('.car_input').val(car);
                $('.fourstep').css('display','none');
                $('.fivestep').css('display','block');
            });
            $('.four_prev').click(function(){
                $('.fourstep').css('display','none');
                $('.threestep').css('display','block');
            });
        });

        $(document).ready(function () {
            var twooptions = {
                success: function (data) {
                    $(".subBtn").attr('disabled',false);
                    alert(data.message);
                    if(data.code=='0000'){
                        setTimeout(function(){
                            window.location.reload();
                        },3000);
                    }
                }
            };
            $(".subBtn").click(function () {
                var fm=document.forms['FastForm'];// HTML DOM 通过form 元素的name值获取
                //
                var myreg = /^(((13[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                if (!myreg.test(fm.mobile.value)) {
                    alert('请输入有效的手机号码！');
                    return false;
                }
                if(fm.imgcode.value==''){
                    alert('请填写验证码');
                    return false;
                }

                if(fm.evaluate.value==''){
                    alert('估算失败，请重新估算');
                    return false;
                }
                $(".subBtn").attr('disabled',true);//禁用按钮
                $("#FastForm").ajaxSubmit(twooptions);
            });
        });
        $('.captcha-image').click(function(){
            var src= $(this).attr('src');
            var index = src.indexOf('?');
            src = src.substring(0,index)+"?"+Math.random();
            $(this).attr('src',src);
        })
    </script>


@endsection